<template>
  <div style="background-color: #F4F5F9;padding: 0px 13px;border-radius: 8px;">
    <div 
      v-for="(item, index) in lines" 
      :key="index" 
      style="padding: 10px 28px;position: relative;height: 55px;"
      >

      <!--  -->
      <img v-if="item.type === 'done'" :src="timeline_xmjd_check" style="width: 16px;position: absolute;top: 13px;left: 0;">
      <span v-if="item.type === 'ing'" style="display: inline-block; width: 8px;height: 8px;border-radius: 50%;background-color: #99C455;position: absolute;top: 22px;left: 4px;"></span>
      <span v-if="item.type === 'no'" style="display: inline-block; width: 8px;height: 8px;border-radius: 50%;border: 2px solid #99C455;position: absolute;top: 22px;left: 4px;"></span>

      <p v-show="index < lines.length - 1" style="height: 48px;width: 1;border-left: 1px dashed #ccc;position: absolute;top: 32px;left: 7px; "></p>

      <p style="font-weight: bold;line-height: 32px;">{{ item.label }}</p>
      <p style="color: #9D9E9F;font-size: 11px;line-height: 16px;">{{ item.time }}</p>
    </div>
  </div>
</template>

<script>
import timeline_xmjd_check from '../assets/xiangmujindu/timelineDone.png'

export default {
  props: {
    lines: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      timeline_xmjd_check
    }
  },
  methods: {
  }
}
</script>